<template>
  <section class='f-distributor'>
    <img class="f-img1" src="@/assets/imgs/jhh_fxs_register_btn.png" alt="" @click="pageJump('register')">

    <p class="f-title">
      <span>我的分销商 </span>
      <span>({{consumerList.length}})</span>
    </p>

    <ul class="f-ul">
      <li class="f-li" v-for="(item,index) in consumerList" :key="index">
        <div class="g-flex-ct">
          <img class="f-img2" src="@/assets/icons/jhh_fxs_head.png" alt="">
          <div>
            <p class="f-text1">{{item.shopName || '--'}}</p>
            <p class="f-text2 f-mt-10">{{item.contactsName || '--'}} {{item.contactsPhone || '--'}}</p>
          </div>
        </div>
        <div>
          <p class="f-text2 f-height">{{ getDateTime(item.joinTime)[6] }}</p>
          <p class="f-text2 f-mt-10 f-right" :style="{'color': item.freezeStatus == 1? '#4BBC1F': 'red'}">
            {{item.freezeStatus == 1? '正常': '冻结'}}
          </p>
        </div>
      </li>
    </ul>

    <van-empty v-if="!consumerList.length" description="暂无分销商信息" />
  </section>
</template>
<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from "vuex";
import api from '../api'
import { getDateTime } from '@/utils/utils';

export default {
  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      consumerList: []
    })

    onMounted(() => {
      store.commit("setNavBar", {
        title: '我的分销商',
        show: true,
        left: true,
        leftType: 'back',
        right: false,
        rightType: 'search',
      });

      getMyConsumer()
    })

    const getMyConsumer = () => {
      let json = {
        "orderBy": "",
        "freezeStatus": "",
        "shieldStatus": "",
        "shopName": "",
        "page": 1,
        "size": 20
      }
      api.myConsumer(json).then(res => {
        state.consumerList = res.data.records
      })
    }

    const pageJump = (name) => {
      router.push({
        path: `/shop/${name}`
      })
    }

    return {
      ...toRefs(state),
      getDateTime,
      pageJump
    }
  }
}
</script>
<style lang='scss' scoped>
.f-distributor {
  padding: 14px 17px;
  .f-img1 {
    width: 344px;
    height: 70px;
  }
  .f-title {
    font-size: 14px;
    font-weight: 500;
    color: #000000;
    margin-top: 28px;
  }
  .f-ul {
    .f-li {
      display: flex;
      //   align-items: center;
      justify-content: space-between;
      padding: 10px 9px 12px 15px;
      margin: 10px 0;
      width: 344px;
      background: #ffffff;
      box-shadow: 0px 2px 6px 0px rgba(0, 51, 119, 0.1);
      border-radius: 10px;
      .f-img2 {
        width: 32px;
        height: 32px;
        margin-right: 12px;
      }
      .f-text1 {
        font-size: 14px;
        font-weight: 300;
        color: #0b0000;
      }
      .f-text2 {
        font-size: 10px;
        color: #424242;
      }
      .f-mt-10 {
        margin-top: 10px;
      }
      .f-height {
        height: 18px;
        padding-top: 5px;
      }
    }
  }
}
</style>